<template>
  <ul class="filter-bar">
    <li
      class="filter-opt price-up"
      :class="{ 'filter-active': status == 'all' }"
      @click="setStatus('all')"
    >
      综合排序
    </li>
    <li
      class="filter-opt price-up"
      :class="{ 'filter-active': status == 'sales' }"
      @click="setStatus('sales')"
    >
      销量优先
    </li>
    <li
      class="filter-opt filter-price price-up"
      :class="{ 'filter-active': status == 'priceMax' || status == 'priceMin' }"
      @click="changePrice"
    >
      价格
    </li>
  </ul>
</template>
<script>
let boo=true;
import {mapState,mapActions} from "vuex"
export default {
    name:"FilterBar",
    computed:{
      ...mapState(['status'])
    },
    methods:{
      ...mapActions(['setStatus']),
        changePrice(){
            if(boo){
              this.setStatus('priceMax');
              boo=false;
            }else{
              this.setStatus('priceMin');
              boo=true;
            }
        },
    }
}
</script>
<style lang="scss" scoped>
  

.filter-bar {
    display: flex;
    height: .4rem;
    background-color: #fff;
    border-bottom: 1px solid #E5E5E5;
    line-height: .4rem;
}

.filter-opt {
    position: relative;
    width: 33.3%;
    color: #5F646E;
    text-align: center;
}

.filter-active {
    // color: #7B57C5;
    color: red;
}

.filter-price:after {
    position: absolute;
    top: .13rem;
    margin-left: .04rem;
    content: '';
    display: inline-block;
    width: .08rem;
    height: .14rem;
    background: url('http://ov52d8mm7.bkt.clouddn.com/arrow-default.png') no-repeat;
    background-size: .08rem .14rem;
}

.filter-active.price-up:after {
    background: url('http://ov52d8mm7.bkt.clouddn.com/arrow-down.png') no-repeat;
    background-size: .08rem .14rem;
}

.filter-active.price-down:after {
    background: url('http://ov52d8mm7.bkt.clouddn.com/arrow-up.png') no-repeat;
     background-size: .08rem .14rem;
}
</style>